 <template>
  <div>
    <Header />
    <div class="zoon"></div>
    <div>
      <div class="broker_box">
        <p class="title">专家帮选 6 大服务内容</p>
        <p class="text">不推销，全面解读，从您的需求出发</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="service">
          <img src="../../assets/img/ljyy.png" alt />
          <div class="service_text">
            <p class="textOne">政策解读</p>
            <p class="textTwo">楼盘分析</p>
            <p class="textThree">楼盘背调</p>
            <p class="textFour">房源匹配</p>
            <p class="textFive">楼盘对比</p>
            <p class="textSix">拍卖过户</p>
          </div>
        </div>
        <!-- <p class="order_btn">立即预约</p> -->
      </div>
      <div class="broker_box team">
        <p class="title">严苛的团队筛选机制</p>
        <p class="text">只为解决您的购房之忧</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="team_box">
          <!-- <div class="team_right">
            <img src="../../assets/img/right_broker.png" alt="" />
          </div>-->
          <div class="team_text">
            <p>
              <img src="../../assets/img/b1.png" alt />
              拥有丰富的房产经纪经验，读懂客户心理
            </p>
            <p>
              <img src="../../assets/img/b2.png" alt />客户服务满意度是考量经纪团队唯一的标准
            </p>
            <p>
              <img src="../../assets/img/b3.png" alt />严格的培训制度保证团队服务无缝衔接
            </p>
            <p>
              <img src="../../assets/img/b4.png" alt />带看次数超过500+/月，满足房产曝光量
            </p>
          </div>
          <div class="team_tt">
            <img src="../../assets/img/tt.png" alt />
          </div>
        </div>
      </div>
      <div class="broker_box">
        <p class="title">瑞鼎法拍经理</p>
        <p class="text">高素质、严要求、更专业</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="broker_tema_p">
          <p class="tema_p1">
            <span class="tema_text">廖 经 理</span>
          </p>
          <p class="tema_p2">
            <span class="tema_text">张 经 理</span>
          </p>
          <p class="tema_p3">
            <span class="tema_text">陈 经 理</span>
          </p>
          <p class="tema_p4">
            <span class="tema_text">刘 经 理</span>
          </p>
          <p class="tema_p5">
            <span class="tema_text">林 经 理</span>
          </p>
          <p class="tema_p6">
            <span class="tema_text">韦 经 理</span>
          </p>
          <p class="tema_p7">
            <span class="tema_text">申 经 理</span>
          </p>
          <p class="tema_p8">
            <span class="tema_text">宋 经 理</span>
          </p>
          <p class="tema_p9">
            <span class="tema_text">张 经 理</span>
          </p>
          <p class="tema_p10">
            <span class="tema_text">杨 经 理</span>
          </p>
          <!-- <img src="../../assets/img/broker_tema.png" alt /> -->
        </div>
      </div>
      <div class="team">
        <p class="title">
          瑞鼎法拍经理
          <span style="color:#F3633E">VS</span>普通服务人员
        </p>
        <!-- <img src="../../assets/img/btx.png" alt /> -->
        <div class="broker_tema">
          <img src="../../assets/img/broker_pd.png" alt />
        </div>
      </div>
    </div>
    <Right />
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
export default {
  data() {
    return {};
  },
  mounted: function() {
    var hash = window.location.hash;
    var index = hash.lastIndexOf("#");
    if (index != -1) {
      var id = hash.substring(index + 1, hash.length + 1);
      var div = document.getElementById(id);
      if (div) {
        setTimeout(function() {
          $("html, body").animate({ scrollTop: $(div).offset().top - 80 }, 500);
        }, 500);
      }
    }
  },
  components: {
    Header,
    Footer,
    Right
  }
};
</script>
<style lang="less" scoped>
.zoon {
  height: 80px;
}
.team {
  background: #f5faff;
  text-align: center;
  padding-top: 60px;
  .title {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
  }
  .text {
    font-size: 20px;
    color: #999999;
  }
}
.team_box {
  display: flex;
  padding: 58px 0 105px 0;
  .team_right {
    margin-left: 90px;
  }
  .team_text {
    margin: 0 160px 0 43px;
    font-size: 16px;
    color: #333333;
    line-height: 60px;
    text-align: left;
    img {
      margin-right: 20px;
    }
  }
  .team_tt {
    width: 537px;
    height: 278px;
  }
}
.broker_box {
  text-align: center;
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  .title {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
  }
  .text {
    font-size: 20px;
    color: #999999;
  }
  .service {
    // margin: 20px 0;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100px;
    .service_text {
      font-size: 20px;
      color: #222222;
      .textOne {
        position: absolute;
        left: 60px;
      }
      .textTwo {
        position: absolute;
        left: 260px;
        top: 190px;
      }
      .textThree {
        position: absolute;
        left: 480px;
      }
      .textFour {
        position: absolute;
        right: 440px;
        top: 190px;
      }
      .textFive {
        position: absolute;
        right: 220px;
      }
      .textSix {
        position: absolute;
        right: 0px;
        top: 190px;
      }
    }
  }
  .order_btn {
    width: 212px;
    margin: 70px auto;
    height: 60px;
    background: #f58057;
    border-radius: 6px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #ffffff;
  }
}
.broker_tema {
  padding: 70px 0;
}
.broker_tema_p {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  p {
    float: left;
    width: 18%;
    margin: 20px 10px;
    height: 275px;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .tema_text {
    position: absolute;
    bottom: 25px;
    left: 20px;
  }
  .tema_p1 {
    background: url("~@/assets/img/brokerMen1.png") center bottom no-repeat;
  }
  .tema_p2 {
    background: url("~@/assets/img/brokerMen2.png") center bottom no-repeat;
  }
  .tema_p3 {
    background: url("~@/assets/img/brokerMen3.png") center bottom no-repeat;
  }
  .tema_p4 {
    background: url("~@/assets/img/brokerMen4.png") center bottom no-repeat;
  }
  .tema_p5 {
    background: url("~@/assets/img/brokerMen5.png") center bottom no-repeat;
  }
  .tema_p6 {
    background: url("~@/assets/img/brokerMen6.png") center bottom no-repeat;
  }
  .tema_p7 {
    background: url("~@/assets/img/brokerMen7.png") center bottom no-repeat;
  }
  .tema_p8 {
    background: url("~@/assets/img/brokerMen8.png") center bottom no-repeat;
  }
  .tema_p9 {
    background: url("~@/assets/img/brokerMen9.png") center bottom no-repeat;
  }
  .tema_p10 {
    background: url("~@/assets/img/brokerMen10.png") center bottom no-repeat;
  }
}
</style>
